<template>
  <div class="home">
    <el-container>
      <el-header>
        <div class="left">
          <span v-on:click="goHome">悦享音乐平台后台管理系统</span>
        </div>
        <div class="right">
          <el-dropdown @command="handleCommand">
            <el-avatar style="cursor:pointer;" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="exit">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside :width="isCollapse?'64px':'200px'">
          <div style="cursor:pointer;" class="toggles" v-on:click='changeCollapse'>
            <span :class="[isCollapse?'not_collapse coll':'coll collapse']"></span>
            <span :class="[isCollapse?'not_collapse coll':'coll collapse']"></span>
          </div>
          <el-menu router unique-opened background-color="#333744" :default-active='state' text-color="#fff" :collapse-transition="false" class="el-menu-vertical-demo" :collapse="isCollapse">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-s-grid"></i>
                <span slot="title">用户管理</span>
              </template>
              <el-menu-item v-on:click="goRouter('/managerlist')" index="/managerlist"><i class="el-icon-menu"></i>管理员列表</el-menu-item>
              <el-menu-item v-on:click="goRouter('/userlist')" index="/userlist"><i class="el-icon-menu"></i>注册用户列表</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-s-grid"></i>
                <span slot="title">音乐管理</span>
              </template>
              <el-menu-item v-on:click="goRouter('/musictypelist')" index="/musictypelist"><i class="el-icon-menu"></i>音乐类型列表</el-menu-item>
              <el-menu-item v-on:click="goRouter('/musiclist')" index="/musiclist"><i class="el-icon-menu"></i>音乐列表</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-s-grid"></i>
                <span slot="title">MV视频管理</span>
              </template>
              <el-menu-item v-on:click="goRouter('/mvlist')" index="/mvlist"><i class="el-icon-menu"></i>MV视频列表</el-menu-item>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-s-grid"></i>
                <span slot="title">歌手管理</span>
              </template>
              <el-menu-item v-on:click="goRouter('/singertypelist')" index="/singertypelist"><i class="el-icon-menu"></i>歌手类型列表</el-menu-item>
              <el-menu-item v-on:click="goRouter('/singerlist')" index="/singerlist"><i class="el-icon-menu"></i>歌手列表</el-menu-item>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-s-grid"></i>
                <span slot="title">歌单管理</span>
              </template>
              <el-menu-item v-on:click="goRouter('/gedantypelist')" index="/gedantypelist"><i class="el-icon-menu"></i>歌单类型列表</el-menu-item>
              <el-menu-item v-on:click="goRouter('/gedanlist')" index="/gedanlist"><i class="el-icon-menu"></i>歌单列表</el-menu-item>
            </el-submenu>
            <el-submenu index="6">
              <template slot="title">
                <i class="el-icon-s-grid"></i>
                <span slot="title">新闻管理</span>
              </template>
              <el-menu-item v-on:click="goRouter('/newstypelist')" index="/newstypelist"><i class="el-icon-menu"></i>新闻分类列表</el-menu-item>
              <el-menu-item v-on:click="goRouter('/newslist')" index="/newslist"><i class="el-icon-menu"></i>新闻列表</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 是否折叠侧边栏
      isCollapse: false,
      // 路由状态
      state: ''
    };
  },
  methods: {
    // 切换折叠侧边栏
    changeCollapse () {
      this.isCollapse = !this.isCollapse
    },
    // 绑定路由状态
    goRouter (index) {
      this.state = index;
    },
    // 退出登录
    handleCommand (command) {
      if (command == 'exit') {
        window.sessionStorage.removeItem('token');
        this.$router.push('/login');
        this.$message('已退出登录！');
      }
    },
    // 前往首页
    goHome () {
      this.$router.push('/home');
    }
  },
  watch: {
    // 监听路由
    $route: {
      handler: function (newVal) {
        this.state = newVal.path;
      },
      immediate: true
    }
  }
}
</script>

<style lang="less" scoped>
  .home{
    height: 100%;
    .left{
      color: #fff;
      font-size: 26px;
      padding-left: 15px;
      span {
        cursor: pointer;
      }
    }
    .toggles{
      height: 25px;
      width: 100%;
      position: relative;
      background-color: #4A5064;
      .coll{
        display: inline-block;
        height: 15px;
        width: 2px;
        background: #fff;
        position: absolute;
        top: 5px;
        transition: all .5s;
      }
      .collapse{
        &:nth-child(1){
          transform: rotate(45deg);
        }
        &:nth-child(2){
          transform: rotate(-45deg);
        }
      }
      .not_collapse{
        &:nth-child(1){
          transform: rotate(0deg);
        }
        &:nth-child(2){
          transform: rotate(0deg);
        }
      }
    }
  }

  .el-submenu,.el-menu-item{
    text-align: left;
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 100%;
    min-height: 400px;
  }

  .el-menu{
    border-right: 0;
  }

  .el-header{
    background-color: #333744;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .el-aside {
    background-color: #333744;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>